<template>
  <div>
    <FormTitle text="按钮" class="pl-3 pt-2">
      <Button type="link" @click="handleAddItem"> 添加 </Button>
    </FormTitle>
    <BasicTable @register="registerButtonList">
      <template #emptyText>
        <div>暂无数据</div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <ButtonModal :tabType="tabType" @register="registerModal" @submit="handleSubmit" />
  </div>
</template>
<script lang="ts" setup name="ButtonSetting">
  import FormTitle from '/@/components/HFormTitle';
  import { Button } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { buttonListSchema } from './side.data';
  import { computed, watch } from 'vue';
  import ButtonModal from './ButtonModal.vue';
  import modelerStore from '/@/store/modules/bpmnModeler';
  defineProps({
    tabType: Number,
  });
  const modeler = modelerStore();
  const nodeItem = computed(() => modeler.nodeItem);
  watch(
    () => nodeItem.value,
    (val) => {
      if (nodeItem.value) {
        const list = val?.menus?.map((i) => ({ name: i }));
        setTableData(list);
      }
    },
    { deep: true },
  );

  const [registerModal, { openModal }] = useModal();
  const [registerButtonList, { setTableData, getDataSource }] = useTable({
    dataSource: [],
    columns: buttonListSchema,
    pagination: false,
    scroll: { y: 700 },
    emptyDataIsShowTable: false,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });

  function handleAddItem() {
    openModal(true, { list: getDataSource() });
  }
  function handleDelete(record) {
    const index = nodeItem.value.menus.findIndex((i) => i === record.name);
    nodeItem.value.menus.splice(index, 1);
  }
  function handleSubmit(params) {
    nodeItem.value.menus = params;
  }
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    padding-top: 0 !important;
  }
</style>
